<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div v-if="flag">你好</div>
    <input type="text" v-focus="flag">
    <h1 v-myif="flag">自己的指令</h1>
    <ul>
      <li v-myfor="list">

      </li>
    </ul>
  </div>
  <input type="text" id="con">
  <script src="./vue.js"></script>
  <script>
    // vue创建全局指令
    //  v-focus  让输入框自动获取焦点
    Vue.directive("focus", {
      // inserted 绑定指令的元素 渲染到dom中了
      inserted: function (el, binding) {
        // el 当前绑定的元素获取组件
        // binding
        //   name  指令名 不包括v前缀
        //   value 指令的绑定所传的值
        //   oldValue 指令绑定前一个值
        console.log(binding.value)
        if (binding.value) { //指令传值为真
          console.log(el)
          el.focus()
          el.style.background = "red"
        }
      }
    })
    var vm = new Vue({
      name: "mybox",
      //el:"#app",
      data() {
        return {
          flag: false,
          list: ["可乐", "小布丁", "雪碧", "旺仔", "瓜子"]
        }
      },
      directives: {//局部指令的创建
        // 指令名
        myif: {
          inserted: function (el, binding) {
            // el 当前元素
            if (binding.value) {
              el.parentNode.appendChild(el)
            } else {
              el.parentNode.removeChild(el)
            }
          }
        },
        myfor: {
          inserted: function (el, binding) {
            // el-- - li
            console.log(el)
            for (var i = 0; i < binding.value.length; i++) {
              var myel = el.cloneNode();
              myel.innerHTML = binding.value[i]
              el.parentNode.appendChild(myel)
            }
            el.parentNode.removeChild(el.parentNode.firstChild)
            // binding.value
          }
        }
      }

    }).$mount("#app")
    // .$mount("#app") 将组件挂载到根实例
    //.$destroy() 销毁组件

  </script>
</body>

</html>